<template>
  <el-row>
    <el-button type="primary" @click="add()">添加</el-button>
  </el-row>
  <el-row>
    <el-table :data="filterTableData" style="width: 100%">
      <el-table-column label="保修编号" prop="dId" />
      <el-table-column label="所属小区" prop="tollName" />
      <el-table-column label="报修用户编号" prop="userName" />
      <el-table-column label="保修设备" prop="dPayTime" />
      <el-table-column label="受理时间" prop="dPayState" />
      <el-table-column label="保修描述" prop="dMoney" />
      <el-table-column label="受理状态" prop="dCreateTime" />
      <el-table-column align="right">
        <template #default="scope">
          <el-button type="success" plain @click="editData(scope.row)">更新</el-button>
          <el-button type="danger" plain @click="Delete(scope.row.dId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
  <!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper" :total="zhonshul" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
  <!-- 添加模态框 -->
  <el-dialog v-model="dialogFormVisible" title="添加" width="500">
    <el-form :model="form">
      <el-form-item label="业主编号">
        <el-select v-model="form.dUserId" placeholder="请选择活动区域">
          <el-option v-for="item in dajksdwaj" :key="item.userId" :label="item.userName" :value="item.userName" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属项目">
        <el-select v-model="form.dTollId" placeholder="请选择活动区域">
          <el-option v-for="itemt in kdswkd" :key="itemt.tollId" :label="itemt.tollName" :value="itemt.tollName" />
        </el-select>
      </el-form-item>
      <el-form-item label="应收金额" :label-width="formLabelWidth">
        <el-input v-model="form.dMoney" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否缴费" :label-width="formLabelWidth">
        <el-input v-model="form.dPayState" autocomplete="off" />
      </el-form-item>
      <el-form-item label="缴费时间" :label-width="formLabelWidth">
        <el-input v-model="form.dPayTime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="form.dCreateTime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="form.dRemark" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addData()"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 编辑模态框 -->
  <el-dialog v-model="editDialogVisible" title="编辑" width="500" align-center>
    <el-form :model="form">
      <el-form-item label="业主编号">
        <el-select v-model="form.dUserId" placeholder="请选择活动区域">
          <el-option v-for="item in dajksdwaj" :key="item.userId" :label="item.userName" :value="item.userName" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属项目">
        <el-select v-model="form.dTollId" placeholder="请选择活动区域">
          <el-option v-for="itemt in kdswkd" :key="itemt.tollId" :label="itemt.tollName" :value="itemt.tollName" />
        </el-select>
      </el-form-item>
      <el-form-item label="应收金额" :label-width="formLabelWidth">
        <el-input v-model="form.dMoney" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否缴费" :label-width="formLabelWidth">
        <el-input v-model="form.dPayState" autocomplete="off" />
      </el-form-item>
      <el-form-item label="缴费时间" :label-width="formLabelWidth">
        <el-input v-model="form.dPayTime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="form.dCreateTime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="form.dRemark" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addData()"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted, toRaw } from 'vue'
import axios from 'axios';

const filterTableData = ref([]);
const zhonshul = ref(0);
// 当前页码
const currentPage = ref(1);
//当前页数量
const pageSize = ref(5);
//查询名称
const search = ref("");
//下拉框
const dajksdwaj = ref([])
const kdswkd = ref([])


const dialogFormVisible = ref(false);
const editDialogVisible = ref(false);//编辑弹窗
const form = ref({
  dId: 0,
  dTollId: 0,
  dUserId: 0,
  dCreateTime: "",
  dMoney: 0,
  dPayState: 0,
  dPayTime: "",
  dRemark: ""
});
const editForm = reactive({
  dId: 0,
  dTollId: 0,
  dUserId: 0,
  dCreateTime: "",
  dMoney: 0,
  dPayState: 0,
  dPayTime: "",
  dRemark: ""
});
onMounted(() => {
  he()
})
function he() {
  axios
    .get(
      `https://localhost:44397/api/TollDetails?ys=${pageSize.value}&ym=${currentPage.value}&name=${search.value}`
    )
    .then((response) => {
      filterTableData.value = response.data.data;
      zhonshul.value = response.data.count;
      console.log(filterTableData.value)
    }
    ).catch((error) => {
      console.error(error);
    })
}
//下拉框绑定
function Uaskd() {
  axios
    .get(`https://localhost:44397/api/TollDetails/La`)
    .then((response) => {
      dajksdwaj.value = response.data.map(item =>
      ({
        userId: item.userId,
        userName: item.userName
      })
      )
      console.log(response.data)
    })
    .catch((error) => {

    })
}
//下拉框绑定
function rtudfa() {
  axios
    .get(`https://localhost:44397/api/TollDetails/Jur`)
    .then((response) => {
      kdswkd.value = response.data.map(itemt =>
      ({
        tollId: itemt.tollId,
        tollName: itemt.tollName
      })
      )
      console.log(response.data)
    })
    .catch((error) => {

    })
}
//添加按钮
function add() {
  Uaskd()
  rtudfa()
  form.value.dCreateTime = ""
  form.value.dId = 0
  form.value.dMoney = 0
  form.value.dPayState = 0
  form.value.dPayTime = ""
  form.value.dRemark = ""
  form.value.dTollId = 0
  form.value.dUserId = ""
  dialogFormVisible.value = true;
}
//添加功能
const addData = () => {
  //添加信息
  axios
    .post("https://localhost:44397/api/TollDetails", toRaw(form.value))
    .then((response) => {
      console.log(response.data);
      if (response.data === 1) {
        ElMessage.success("添加成功");
        dialogFormVisible.value = false; // 关闭对话框
        cx(); // 刷新页面数据
      } else {
        ElMessage.error("添加失败，请重试！");
      }
    })

};
//编辑功能
const updateData = () => {
  axios
    .put(
      `api/api/TollDetails?id=${editForm.caId}`, toRaw(editForm)
    )
    .then(function (response) {
      editForm.dCreateTime = ""
      editForm.dId = 0
      editForm.dMoney = 0
      editForm.dPayState = 0
      editForm.dPayTime = ""
      editForm.dRemark = ""
      editForm.dTollId = 0
      editForm.dUserId = ""
      console.log(response.data);
      if (response.data) {
        ElMessage({
          message: "更新成功",
          type: "success",
        });
        closeEditDialog();
        cx(); // 刷新页面
      } else {
        ElMessage.error("更新失败，请重试！");
      }
    })

};
//编辑显示功能
const editData = (row) => {
  Uaskd()
  rtudfa()
  editForm.dCreateTime = row.dCreateTime
  editForm.dId = row.dId
  editForm.dMoney = row.dMoney
  editForm.dPayState = row.dPayState
  editForm.dPayTime = row.dPayTime
  editForm.dRemark = row.dRemark
  editForm.dTollId = row.dTollId
  editForm.dUserId = row.dUserId
  editDialogVisible.value = true;
};
//点击关闭按钮
const closeEditDialog = () => {
  editDialogVisible.value = false;
};
//删除按钮
function Delete(caId) {
  console.log(caId)
  axios.delete(`api/api/TollDetails=${caId}`)
    .then((response) => {
      if (response.status === 200) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        dialogFormVisible.value = false;
      } else {
        ElMessage({
          message: "删除失败",
          type: "waring",
        });
      }
      cx()
    })
    .catch((error) => {
      console.error(error.response.data); // 获取服务器返回的详细错误信息
      console.error(error.response.status); // 获取HTTP状态码
      console.error(error.response.statusText); // 获取HTTP状态码对应的文本描述
    });
}
</script>

<style></style>